<script>
import AnalysisVideo from "../../analysisVideo.vue";
import { getShowImage } from "../../../../../../utils";

export default {
  name: "analysis",
  methods: { getShowImage },
  components: { AnalysisVideo },
  inject: ["root", "parent"],
  data() {
    return {
      questionList: [],
      textQuestionList: [],
      isVip: false,
    };
  },
  created() {
    //初始化数据
    this.questionList = this.root.details.multipleCorresponding.questionList;
    this.textQuestionList =
      this.root.details.multipleCorresponding.textQuestionList;
    this.isVip = this.root.isVip;
  },
};
</script>

<template>
  <view class="component">
    <!--		问题选项列表-->
    <view class="option-list">
      <view class="option-item" v-for="item in textQuestionList" :key="item.id">
        <view class="mark">{{ item.mark }}</view>
        <view class="text">
          <view class="content">{{ item.content }}</view>
          <view class="trans">{{ item.trans }}</view>
        </view>
      </view>
    </view>
    <!--		问题列表-->
    <view class="question-list">
      <view
        class="question-item"
        v-for="item in questionList"
        :key="item.questionId"
      >
        <view style="font-weight: bold">
          <text>{{ item.serialNum }}</text>
          <text>.\t</text>
          <text>{{ item.content }}</text>
        </view>
        <view>
          <text>正确答案：{{ item.answer }}</text>
        </view>
        <view>
          <text>你的作答：</text>
          <text v-if="!item.userAnswer" class="user-answer incorrect"
            >[未作答]</text
          >
          <text
            v-else
            class="user-answer"
            :class="item.answer === item.userAnswer ? 'correct' : 'incorrect'"
            >{{ item.userAnswer }}</text
          >
        </view>
        <!--				题目解析和视频讲解-->
        <template v-if="isVip">
          <view v-html="item.analysis" v-if="item.analysis" class="analysis"></view>
          <analysis-video
            v-if="item.videoUrl"
            :video-file-url="getShowImage(item.videoUrl)"
          ></analysis-video>
        </template>
        <view v-else class="btn-container">
          <view class="btn" @click="() => root.checkIsVip()">查看解析</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.component {
  .option-list {
    .option-item {
      display: flex;
      margin-top: 20rpx;
      .mark {
        font-size: 34rpx;
        font-weight: bold;
      }
      .text {
        font-size: 30rpx;
        margin-left: 20rpx;
        .trans {
          color: var(--text-color-light);
        }
      }
    }
  }
  .question-list {
    margin-top: 40rpx;
    .question-item {
      margin-top: 20rpx;
      font-size: 30rpx;
      line-height: 1.7;
      .user-answer {
        font-weight: bold;
      }
      .correct {
        color: #88debc;
      }
      .incorrect {
        color: #ff9c9c;
      }
      .btn-container {
        display: flex;
        justify-content: flex-end;
        margin-top: 10rpx;
        .btn {
          padding: 0 30rpx;
          height: 60rpx;
          border-radius: 30rpx;
          background: var(--theme-color);
          display: flex;
          align-items: center;
        }
      }
			.analysis {
				color: var(--text-color-theme);
			}
    }
  }
}
</style>
